<template>

  <div class="serach-layout">

    <div v-for="i in 2" class="box">

      <div class="serach-box flex">
        <el-image fit="cover" :src="searchImg" class="img"></el-image>
      </div>

      <div class="main-box">

        <div v-if="i===1" class="item active">
          <div class="flex">
            <div class="img">
              <el-image v-if="appInfo.icon" style="height: 64px;width: 64px;border-radius: 4px;" fit="cover" :src="appInfo.icon" />
            </div>
            <div class="item-info">
              <p class="title overflow-ellipsis ">
                {{ appInfo.appName||'加载失败' }}
              </p>

              <div class="score flex">
                <em class="btn">Ad</em>
                <p class="rote">
                  <i v-for="item in 4" class="el-icon-star-on" color="#A3A9AF" />
                  <i class="el-icon-star-off" color="#A3A9AF" style="font-size: 12px !important;" />
                </p>
                <em class="num">2K</em>
              </div>

            </div>
            <div class="item-rt">
              <div class="item-btn">查看</div>
              <div class="sec">App内购买项目</div>
            </div>
          </div>

          <div v-if="screenshotList.length" class="img-box flex">
            <template v-for="(imgitem,imgindex) in screenshotList" v-if="screenshotList.length>=3">
              <el-image v-if="imgindex<3" style="height: 298px;width: 136px;border-radius: 4px;" fit="fill" :src="imgitem.assetURL" />
            </template>

            <el-image v-else style="height: 298px;width: 420px;border-radius: 4px;" fit="fill" :src="appInfo.icon" />
          </div>

        </div>

        <div v-else class="big-item">
          <div class="item active flex">
            <div class="img">
              <el-image style="height: 64px;width: 64px;border-radius: 4px;" fit="cover" :src="appInfo.icon" />
            </div>
            <div class="item-info">
              <p class="title overflow-ellipsis ">
                {{ appInfo.appName||'加载失败' }}
              </p>

              <div class="score flex">
                <em class="btn">Ad</em>
                <p class="rote">
                  <i v-for="item in 4" class="el-icon-star-on" color="#A3A9AF" />
                  <i class="el-icon-star-off" color="#A3A9AF" style="font-size: 12px !important;" />
                </p>
                <em class="num">2K</em>
              </div>

            </div>
            <div class="item-rt">
              <div class="item-btn">查看</div>
              <div class="sec">App内购买项目</div>
            </div>
          </div>

          <p class="item-sec flex" style="justify-content: flex-start;">[<span class="overflow-ellipsis" style="max-width: 120px;display: inline-block; margin-right: 0.5em;">{{ appInfo.appName||'加载失败' }}</span>&#160;
            store 年度精选App]</p>
          <p class="item-sec flex" style="justify-content: flex-start;">[<span class="overflow-ellipsis" style="max-width: 120px;display: inline-block; margin-right: 0.5em;">{{ appInfo.appName||'加载失败' }}</span>&#160;store
            官方推荐].....</p>
        </div>

        <div v-for="item in (i===1?leftLength:4)" class="item flex">
          <div class="img" />
          <div class="item-info">
            <p class="title" />
            <p class="sub-title" />
          </div>
          <div class="item-btn" />
        </div>

      </div>

    </div>

  </div>

</template>

<script>
  import {
    getSearchCreativeSets
  } from '@/api/create.js'

  export default {
    props: {
      appInfo: {
        default: () => {
          return {
            icon: undefined
          }
        },
        type: Object
      }
    },
    data() {
      return {
        searchImg: require('@/assets/images/create/pro-search.png'),
        screenshotList: []
      }
    },

    computed: {
      leftLength() {
        if (this.screenshotList.length) {
          return 2
        } else {
          return 5
        }
      }
    },
    watch: {
      appInfo: {
        deep: true,
        immediate: true,
        handler: function(newval, oldval) {
          this.getScreenshot()
        }
      }
    },
    methods: {
		// 该接口后端已弃用
      async getScreenshot() {
        const obj = {
          appid: this.appInfo.adamId,
          currencyType: this.$store.state.user.unit
        }
        obj.country = obj.currencyType === 'USD' ? 'US' : 'CN'
        return false;
        const res = await getSearchCreativeSets(obj)
        if (res.data.code * 1 === 20000) {
          if (!res.data.data || res.data.data.length === 0 || res.data.data.data.creativeSetDetails.length === 0) {
            this.screenshotList = []
          } else {
            let list = []
            const details = res.data.data.data.creativeSetDetails['en-' + obj.country].appPreviewDeviceWithAssets
            if (res.data.data.data.creativeSetDetails['iphone_6_5']) {
              list = details['iphone_6_5'].screenshots
            } else {
              for (const key in details) {
                if (key.indexOf('iphone') !== -1) {
                  list = details[key].screenshots
                }
              }
            }
            this.screenshotList = list
          }
        } else {
          this.$message.closeAll()
          this.$message.error(res.message || '服务出错，请稍候刷新页面重试')
        }
      }
    }

  }
</script>

<style lang="scss" scoped>
  .serach-layout {
    transform: scale(0.5);
    position: absolute;
    top: -210px;
    left: -256px;
    display: flex;
  }

  .box {
    display: inline-block;
    width: 490px;
    height: 860px;
    padding: 0 22px;
    padding-top: 46px;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid #e0e0e0;

    margin-right: 24px;

    .serach-box {
      margin-bottom: 32px;

      .img {
        margin: 0 -10px;
      }

    }

    .item {

      .img {
        width: 66px;
        height: 66px;
        border-radius: 4px;
        background-color: #F4F4F4;
        margin-right: 24px;
      }

      .item-info {
        max-width: 200px;
        padding: 34px 0;
        // border-top: 1px solid #F4F4F4;
        flex: 1;
        position: relative;

        &::before {
          height: 2px;
          width: 358px;
          position: absolute;
          top: 0;
          left: 0;
          content: '2';
          font-size: 0;
          background-color: #F4F4F4;
        }

        .title {
          background-color: #F4F4F4;
          border-radius: 8px;
          width: 80%;
          height: 14px;
          margin-bottom: 20px;
        }

        .sub-title {
          background-color: #F4F4F4;
          width: 60%;
          height: 14px;
          border-radius: 8px;
        }

      }

      .item-btn {
        height: 36px;
        width: 102px;
        background-color: #F4F4F4;
        border-radius: 8px;
      }

    }

    .active {
      margin-bottom: 24px;
      padding: 12px;
      background: #EDF6FF;
      border: 1px solid #E2E7EB;
      box-sizing: border-box;
      border-radius: 10px;

      .img {
        width: 60px;
        height: 64px;
        background: #C4C4C4;
        border-radius: 4px;
      }

      .score {
        max-width: 3;
        justify-content: flex-start;

        .rote {
          i {
            font-size: 14px !important;
          }

          margin: 0 8px;
        }

        em.btn {
          width: 25px;
          height: 16px;
          background: #9CC8F5;
          border-radius: 4px;
          box-sizing: border-box;
          border-radius: 4px;
          font-size: 12px;
          line-height: 16px;
          text-align: center;
          /* identical to box height, or 133% */
          color: #FFFFFF;
        }

        em.num {
          font-size: 14px;
          line-height: 22px;
          color: #777B80;
        }
      }

      .item-info {
        padding: 0 !important;

        .title {
          font-size: 20px;
          line-height: 24px;
          color: #000000;
          height: 24px;
          background: none;
        }
      }

      .item-btn {
        background: #FFFFFF;
        border-radius: 20px;
        color: rgba(59, 141, 241, 1);
        text-align: center;
        line-height: 36px;
        font-size: 18px;
      }

      .sec {
        font-size: 12px;
        line-height: 16px;
        /* identical to box height, or 133% */
        padding-top: 4px;
        text-align: center;
        color: rgba(0, 0, 0, 0.5);
      }

    }

    .big-item {
      margin-bottom: 36px;
      padding: 12px;
      background: #EDF6FF;
      border: 1px solid #E2E7EB;
      box-sizing: border-box;
      border-radius: 10px;

      .item-sec {
        padding-top: 4px;
        font-size: 16px;
        line-height: 24px;
        /* identical to box height, or 150% */
        color: rgba(0, 0, 0, 0.5);
      }

      .active {
        border: none;

      }

    }

  }

  .img-box {
    padding: 34px 0;
    padding-bottom: 12px;
  }
</style>
